<!DOCTYPE html>
<html lang="zxx">

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<title>example for the page borders and background-origin feature</title>
		<script src="../../../dist/paged.polyfill.js"></script>
		<style>
			@page {
				size: letter;
				margin: 1.2in;
				padding: 1em;
			}

			@media screen {
				.pagedjs_page {
					box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
				}
			}

			section {
				break-before: page;
			}

			.part-one {
				page: partOne;
			}

			.part-two {
				page: partTwo;
			}

			@page partOne {
				border-top: 10px solid orange;
				/* padding-top: 3em; */
				padding: 2em 4em;
				margin: 3em;
				border: 2px solid red;
				background: yellow;
				/* the default */
				background-origin: border-box;
				background-repeat: no-repeat;
			}

			@page partTwo {
				border: 3px solid red;
				border-top: 10px solid orange;
				border-bottom: 5px solid green;
				background: purple;
				background-origin: content-box;

			}
		</style>
	</head>

	<body>
		<section class="part-one">
			<h2>lol</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
		</section>
		<section class="part-two">
			<h2>lol</h2>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
			<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
		</section>
	</body>

</html>